<div class="panel panel-default" style="margin-bottom:0px;">
    <div class="panel-heading" role="tab" style="padding:0px;" [ngClass]="{'expandedBorderBottom': expanded == true, 'expanded-event-header': expanded === true}">
        <span class="panel-title row" style="margin: 0px;">
            <a #panelLink *ngIf="noExpand !== true" href="{{'#collapse'+ eventIndex}}" (click)='collapseToggle()' data-toggle="collapse"
                class="accordion-toggle col-md-1 expandLink collapsed">&nbsp;</a>
            <div *ngIf="noExpand" class="col-md-1"></div>
            <div (click)='clickToToggle()' style="padding: 0;margin-left: -20px;" [ngClass]="{'linkHeader': noExpand !== true}" class="col-sm-11">
                <div class="row row-eq-height" style="margin:0;">
                    <div class="col-md-3 rowHeader" style="padding:0px 0px 10px 0px;">
                        <div>{{ eventIndicator.name }}</div>
                        <div>
                            <img [src]="resourcesUrl + '/icon_event_cat_' + eventIndicator.category + '_small.png'" width="16" style="padding:0px" /> Category {{ eventIndicator.category }} Event
                            <span *ngIf="indicator">- {{ indicator.eventCategoryText }}</span>
                        </div>
                    </div>

                    <!-- ISSUE Charts, should be 3 -->
                    <div class="col-md-9 borderLeft chartCell">
                        <div class="col-md-4 borderLeft chartCell" *ngFor="let column of columns" [ngClass]="{'highlightCell': column.highlight}">
                            <div class="col-md-6 issueChart">
                                <div issueChart *ngIf="column.showChart" [chartID]="column.valueField + '_' + indicatorIndex" [chartData]="eventIndicator[column.valueField].value"
                                [chartLimit]="eventIndicator[column.valueField].average" [showAxis]="showAxis" [color]="column.chartColor"
                                [maxRating]="column.maxRating" [limitImage]="column.limitImage">
                                <div id="{{column.valueField + '_' + indicatorIndex}}" class='issuesChart'></div>
                                </div>
                            </div>
                            <div [ngClass]="{ 'col-md-6 issueRating': !column.showChart }">
                                <span *ngIf="column.showRating" [ngClass]="{'boldRating': column.boldRating}">
                                    {{eventIndicator[column.valueField].value.toFixed(column.decimals)}} {{column.ratingUnit}}
                                </span>
                                <span *ngIf="eventIndicator[column.valueField].clusterName" [ngClass]="{'boldRating': column.boldRating}">
                                    {{eventIndicator[column.valueField].clusterName}}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </span>
    </div>
    <div *ngIf="noExpand !== true" id="{{'collapse'+ eventIndex}}" class="panel-collapse collapse">
        <div class="panel-body expanded-event" *ngIf="indicator != undefined" style="padding: 20px 30px;">
            <div class="row" style="padding: 5px 10px">
                <div class="col-sm-6">
                    <div style="font-size: 1.2em;">
                        <strong>{{ indicator.name }}</strong>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="row" *ngIf="eventIndicator.weightedScore">
                        <div class="col-sm-3">
                            <span style="font-size: 1.4em;">
                                {{ eventIndicator.score.value | number:'1.0-0' }}
                            </span>
                            <div>Raw Score</div>
                        </div>
                        <div class="col-sm-1">
                            <span style="font-size: 1.2em;">x</span>
                        </div>
                        <div class="col-sm-2">
                            <span>{{ eventIndicator.weight.value | number:'1.1-2' }}%</span>
                            <div>Weight</div>
                        </div>
                        <div class="col-sm-1">
                            <span style="font-size: 1.2em;">=</span>
                        </div>
                        <div class="col-sm-4">
                            <span>{{ eventIndicator.weightedScore.value | number:'1.1-1' }}</span>
                            <div>Weighted Score</div>
                        </div>
                    </div>
                </div>
            </div>

            <div *ngIf="indicator.outlookText" class="text-center">
                <hr />
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1">
                        <div style="font-size: 1.2em;">
                            <div>
                                <img [src]="resourcesUrl + '/icon_event_cat_' + eventIndicator.category + '_small.png'" width="24" style="padding:0px" /> Category {{ eventIndicator.category }} Event
                                <span *ngIf="indicator">- {{ indicator.eventCategoryText }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <hr />

            <div *ngIf="eventIndicator.category != 1 && eventIndicator.category != 2" class="row">
                <div *ngIf="indicator.outlookComments.length > 0" class="col-md-6">
                    <p class="boldText">
                        Outlook - {{ indicator.outlookLabel }}
                        <img [src]="resourcesUrl + '/'+indicator.outlookLabel+'.png'" width="20" style="padding:0px" />
                    </p>
                    <p>{{indicator.outlookText}}</p>
                    <p *ngFor="let comment of indicator.outlookComments">
                        {{comment}}
                    </p>
                </div>

                <div *ngIf="indicator.controversySummary != '' || indicator.eventJustification != ''" class="col-md-6">
                    <p class="boldText">Assessment</p>
                    <p>{{indicator.controversySummary}}</p>
                    <p>{{indicator.eventJustification}} </p>
                </div>
            </div>
            <hr *ngIf="eventIndicator.category != 1 && eventIndicator.category != 2" />
            <div class="row">
                <div class="col-md-6">
                    <p class="boldText">Incident History</p>

                    <div class="col-md-12" mapChart *ngIf="indicator && locations" [chartID]="'mapChart' + indicator.code" [currentCompany]="indicator.companyId"
                        [currenEvent]="indicator.code" [chartData]="locations">
                        <div id="{{'mapChart' + indicator.code}}" style="height:300px;width:100%;"></div>
                    </div>

                    <p *ngIf="indicator.locationsText != ''">
                        <label class="boldText">Locations:&nbsp;</label>{{indicator.locationsText}}
                    </p>
                    <p *ngIf="indicator.tags != ''">
                        <label class="boldText">Tags:&nbsp;</label>{{indicator.tags}}
                    </p>

                </div>

                <div *ngIf="indicator.incidents" class="col-md-6" style="max-height:500px; overflow-y:auto; ">
                    <div class="col-sm-12" style="margin-bottom:15px" *ngFor="let incident of indicator.incidents">
                        <p class="boldText" style="padding:0;margin:0 0 4px 0px">{{incident.mainIncident.name}}</p>
                        <p style="margin:0 0 4px 0" *ngIf="incident.mainIncident.externalUrl"><a href="{{incident.mainIncident.externalUrl}}" target="_blank">{{incident.mainIncident.source}} - {{incident.mainIncident.date}}</a></p>
                        <p style="margin:0 0 4px 0" *ngIf="!incident.mainIncident.externalUrl">{{incident.mainIncident.source}} - {{incident.mainIncident.date}}</p>

                        <div style="padding:0 0 0 15px;margin:0 0 4px 0" *ngFor="let update of incident.updates">
                            <p class="boldText" style="margin:0 0 4px 0">{{update.name}}</p>

                            <p style="margin:0 0 4px 0" *ngIf="update.externalUrl"><a href="{{update.externalUrl}}" target="_blank">{{update.source}} - {{update.date}}</a></p>
                            <p style="margin:0 0 4px 0" *ngIf="!update.externalUrl">{{update.source}} - {{update.date}}</p>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>